<template>
    <div id="index">
        <el-container>
            <el-header>
                <TopNav></TopNav>
            </el-header>
            <el-container style="height :calc(100% - 60px);">
                <el-aside :width="isCollapse?'60px':'200px'">
                    <NavMenu @toggleCollapse="getisCollapse"></NavMenu>
                    <!-- <router-view/> -->
                </el-aside>
                <el-container>
                    <el-main>
                        <!--路由占位符-->
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>
<style lang="stylus" scoped>
.el-header {
    color: #333;
    padding :0px;
    height :60px;
  }
  
  .el-aside {
    background-color:#545c64
  }
  .el-main{
      background :#F8F8FF;
  }
  #index{
      width :100%;
      height :100%;
  }
  .el-container{
      width :100%;
      height :100%;
  }
</style>

<script>
import NavMenu from '@/components/NavMenu.vue'
import Store from '../Vuex/store'
import TopNav from '@/components/TopNav.vue'
export default {
    // created(){
    //     window.sessionStorage.setItem("activePath","")
    // },
    name:"index",
    components:{
        NavMenu,
        TopNav
    },
    data(){
        return{
            username:localStorage.getItem('mytoken'),
            isCollapse:false
        }
    },
    methods:{
        getisCollapse(bool){
            this.isCollapse=bool
        }
    }
    
}
</script>